<template>
	<view class="container">
		<view class="person-item-layer person-item-top">
			<view class="person-left">网络名称</view>			
			<view class='person-right'>{{userInfo.netname}}</view>
		</view>
		
		<view class='person-item-layer'>
		    <view class="person-left">区域号</view>
		    <view class='person-right'>{{userInfo.areaCode}}</view>
		</view>
		
		<view class='person-item-layer'>
		    <view class="person-left">订户姓名</view>
		    <view class='person-right'>{{userInfo.userName}}</view>
		</view>
		
		<view class='person-item-layer'>
		    <view class="person-left">订户编号</view>
		    <view class='person-right'>{{userInfo.userCode}}</view>
		</view>
		
		<view class='person-item-layer'>
		    <view class="person-left">订户状态</view>
		    <view class='person-right'>{{userInfo.state === '1'?"正常":"已注销"}}</view>
		</view>

		<view class='person-item-layer'>
		    <view class="person-left">证件类型</view>
		    <view class='person-right'>{{userInfo.documentType}}</view>
		</view>
		
		<view class='person-item-layer'>
		    <view class="person-left">证件号码</view>
		    <view class='person-right'>{{userInfo.documentNo}}</view>
		</view>
		
		<view class='person-item-layer' hover-class='person-item-hover' hover-stay-time='50' @tap='onChangePhone'>
		    <view class="person-left">移动电话</view>
		    <view class='person-right'>
		      <view>{{userInfo.mobile}}</view>
		      <image class='person-right-image' src='/static/images/right.png'></image>
		    </view>
		</view>
		
		<view class='person-item-layer' hover-class='person-item-hover' hover-stay-time='50' @tap='onChangeAddress'>
		    <view class="person-left">地址</view>
		    <view class='person-right'>
		      <view>{{userInfo.address}}</view>
		      <image class='person-right-image' src='/static/images/right.png'></image>
		    </view>
		</view>  
	</view>
</template>

<script>
	import apis from '../../../api.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	
	export default {
		data() {
			return {
				
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']), //对全局变量hasLogin进行监控
		},
		methods: {
			...mapMutations(['logout']), //对全局方法 login进行监控
			onChangePhone(){
				uni.navigateTo({
					url:'./change-userinfo/change-userinfo?changetype=0'
				})
			},
			onChangeAddress(){
				uni.navigateTo({
					url:'./change-userinfo/change-userinfo?changetype=1'
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F1F1F1;
	}
	.person-item-layer{
		width: calc(100% - 20rpx);
		height: 90rpx;
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		align-items:center;
		
		color: #999;
		background-color: white;
		padding: 0rpx 0rpx 0rpx 20rpx;
	}
	.person-item-top{
		margin-top:20rpx;
	}
	.person-right{
	  width: 500rpx;
	  color: #333;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	}
	.person-right-image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.person-item-hover{
		background-color: #e3e3e5;
	}
</style>
